<template>
    <div style="border: green solid 1px">
        <div style="background-color: #42b983">非具名插槽：<slot></slot></div>
        <div style="background-color: blueviolet">具名插槽：<slot name="header"></slot></div>
        <div style="background-color: coral">具名带参数插槽：<slot name="content" msg="我的值是给props的"></slot></div>
    </div>
</template>
<script>
    export default {
        props: {

        },
        mounted() {
            let header = this.$slots.header;
            let content = this.$slots.content;

            console.group();
            console.log("slots header: %s", header);
            if(!!header) {
                console.log("slots header html: %s", header[0].elm.innerHTML);
            }

            /**
             * 获取不到<template slot="content" scope="props">
             * 这里为undefined
             */
            console.log("slots content: %s", content);
            if(!!content) {
                console.log("slots content html: %s", content[0].elm.innerHTML);
            }
            console.groupEnd();


            let scopedSlot = this.$scopedSlots;
            if(!!scopedSlot.content) {
                console.group();
                let contentScope = scopedSlot.content();
                /**
                 * 无法获得elm
                 * 只能获取下面的值
                 */
                console.log("scopedSlot: %s", contentScope[0].children[0].text);
                console.groupEnd();
            }
        },
        data () {
            return {
                message: ""
            }
        },
        /**
         * 计算属性
         */
        computed: {

        },
        methods: {

        }
    }
</script>
<style scoped>

</style>